<template>
    <el-table :data="tranPageInfo.list" style="width: 100%">
        <el-table-column type="index" label="序号" width="55"/>
        <el-table-column property="tranNo" label="交易流水号">
            <template #default="scope">
                <a href="javascript:void(0)" v-on:click="view(scope.row.id)">{{ scope.row.tranNo }}</a>
            </template>
        </el-table-column>
        <el-table-column property="clueDo.clueName" label="客户姓名">
            <template #default="scope">
                <a href="javascript:void(0)" @click="view(scope.row.id)">{{ scope.row.clueDo.fullName }}</a>
            </template>
        </el-table-column>
        <el-table-column property="money" label="交易金额"/>
        <el-table-column property="expectedDate" label="预计成交时间"/>
        <el-table-column property="stageDo.typeValue" label="交易阶段"/>
        <el-table-column property="nextContactTime" label="下次跟踪时间"/>
        <el-table-column label="操作" width="145">
            <template #default="scope">
                <el-button type="success" :icon="Message" circle @click="view(scope.row.id)"/>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        background layout="prev, pager, next, jumper, total"
        :total="tranPageInfo.total"
        :page-size="tranPageInfo.pageSize"
        @change="toPage"/>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {doGet} from "../http/httpRequest.js";
import {showMessage} from "../util/message.js";
import {Message, Delete, Edit} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

let router = useRouter();
// 交易分页数据对象，用于存储从后端获取的交易列表分页信息
// 包含list(当前页数据数组)、total(总记录数)、pageSize(每页记录数)等属性
let tranPageInfo = ref({});

// 组件挂载完成后执行的生命周期钩子
onMounted(() => {
    // 初始化加载第一页交易列表数据
    loadTranList(1);
})

/**
 * 加载交易列表数据函数
 * @param {number} current - 当前页码，用于分页查询
 * 功能：调用后端API获取交易列表数据，并更新到响应式对象中
 */
const loadTranList = current => {
    // 发送GET请求到/api/trans接口，传递分页参数
    doGet('/api/trans', {
        current: current,  // 当前页码参数
    }).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 将获取的分页数据赋值给响应式对象，自动更新视图
            tranPageInfo.value = resp.data.info;
        } else {
            // 请求失败时显示错误消息提示
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 分页导航函数
 * @param {number} currentPage - 要跳转到的页码
 * 功能：处理分页组件的change事件，重新加载指定页码的数据
 * 注意：该函数由el-pagination组件自动传入currentPage和pageSize参数
 */
const toPage = currentPage => {
    // 调用加载交易列表函数，传入新的页码
    loadTranList(currentPage);
}

/**
 * 查看交易详情函数
 * @param {number} id - 交易记录ID
 * 功能：跳转到交易详情页面
 */
const view = id => {
    // 使用路由导航到交易详情页，路径格式为/dashboard/tran/交易ID
    router.push('/dashboard/tran/' + id);
}

// 编辑交易记录函数（在模板中使用但未在script中定义）
// const edit = id => {
//     router.push('/dashboard/tran/edit/' + id);
// }

// 删除交易记录函数（在模板中使用但未在script中定义）
// const del = id => {
//     // 实际项目中应该添加确认对话框
//     doDelete('/api/tran/' + id).then(resp => {
//         if (resp.data.code == 200) {
//             showMessage('删除成功', 'success');
//             // 重新加载当前页数据
//             loadTranList(tranPageInfo.value.current);
//         } else {
//             showMessage(resp.data.msg, 'error');
//         }
//     })
// }
</script>

<style scoped>
.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>